<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="选择申请类型"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <div class="select-box">
                <div
                    class="select-item shop-keeper"
                    v-if="userInfo.vip_level<3"
                >
                    <div class="shop-keeper-info">和众多精英一样，<br>用另一种方式改变您的生活姿态。</div>
                    <div
                        class="shop-keeper-btn"
                        @click="beShopKeeper"
                    >成为百领金牌店主</div>
                </div>
                <div
                    class="select-item service-provider"
                    v-if="userInfo.vip_level<4"
                >
                    <div class="service-provider-info">和众多精英一样，<br>用另一种方式改变您的生活姿态。</div>
                    <div
                        class="service-provider-btn"
                        @click="beServiceProvider"
                    >成为百领服务商</div>
                </div>
            </div>
        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'TypeSelect',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            userInfo: ''
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        beShopKeeper() {
            this.$router.push({
                path: '/joinUs/rules',
                query: { rulesType: '1' }
            })
        },
        beServiceProvider() {
            this.$router.push({
                path: '/joinUs/rules',
                query: { rulesType: '2' }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.select-box
    padding 0.37rem
    .select-item
        position relative
        width 100%
        height 4.7rem
        background-size 100% 100%
        background-repeat no-repeat
        margin-bottom 0.18rem
        .shop-keeper-info
            position absolute
            top 0.87rem
            left 0.55rem
            font-size 0.44rem
            color #896239
            line-height 1.3
        .shop-keeper-btn
            position absolute
            bottom 0.6rem
            left 0.55rem
            width 4.22rem
            line-height 0.9rem
            text-align center
            background #d7b889
            font-size 0.38rem
            color #896239
            border-radius 30px
        .service-provider-info
            position absolute
            top 0.87rem
            left 0.55rem
            font-size 0.44rem
            color #f2e1b3
            line-height 1.3
        .service-provider-btn
            position absolute
            bottom 0.6rem
            left 0.55rem
            width 4.22rem
            line-height 0.9rem
            text-align center
            background #59564d
            font-size 0.38rem
            color #f2e1b3
            border-radius 30px
    .shop-keeper
        background-image url('../../assets/images/joinUs/shop-keeper-bg.png')
    .service-provider
        background-image url('../../assets/images/joinUs/service-provider-bg.png')
    .select-item:last-child
        margin 0
</style>
